<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation 
	<a class="m-link" href="https://material.angular.io/components/menu/overview" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleBasicMenu">
			<div class="m-section">
				<p class="m-section__sub">
					<code>&lt;mat-menu&gt;</code> is a floating panel containing list of options.
				</p>
				<div class="m-separator m-separator--dashed"></div>
				<div class="m-section__content">
					<button mat-button [matMenuTriggerFor]="menu10">Menu</button>
					<mat-menu #menu10="matMenu">
						<button mat-menu-item>Item 1</button>
						<button mat-menu-item>Item 2</button>
					</mat-menu>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleMenuWithIcons">
			<div class="m-section">
				<p class="m-section__sub">
					Menus support displaying
					<code>&ltmat-icon&gt;</code> elements before the menu item text.
				</p>
				<div class="m-separator m-separator--dashed"></div>
				<div class="m-section__content">
					<button mat-icon-button [matMenuTriggerFor]="menu32">
						<mat-icon>more_vert</mat-icon>
					</button>
					<mat-menu #menu32="matMenu">
						<button mat-menu-item>
							<mat-icon>dialpad</mat-icon>
							<span>Redial</span>
						</button>
						<button mat-menu-item disabled>
							<mat-icon>voicemail</mat-icon>
							<span>Check voicemail</span>
						</button>
						<button mat-menu-item>
							<mat-icon>notifications_off</mat-icon>
							<span>Disable alerts</span>
						</button>
					</mat-menu>

				</div>
			</div>
		</m-material-preview>
	</div>
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleNestedMenu">
			<div class="m-section">
				<p class="m-section__sub">
					Material supports the ability for an
					<mark>mat-menu-item</mark> to open a
					<mark>sub-menu</mark>. To do so, you have to define your root menu and sub-menus, in addition to setting the
					<mark>[matMenuTriggerFor]</mark> on the mat-menu-item that should trigger the sub-menu
				</p>
				<div class="m-separator m-separator--dashed"></div>
				<div class="m-section__content">
					<button mat-button [matMenuTriggerFor]="animals">Animal index</button>

					<mat-menu #animals="matMenu">
						<button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
						<button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
					</mat-menu>

					<mat-menu #vertebrates="matMenu">
						<button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
						<button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
						<button mat-menu-item [matMenuTriggerFor]="reptiles">Reptiles</button>
						<button mat-menu-item>Birds</button>
						<button mat-menu-item>Mammals</button>
					</mat-menu>

					<mat-menu #invertebrates="matMenu">
						<button mat-menu-item>Insects</button>
						<button mat-menu-item>Molluscs</button>
						<button mat-menu-item>Crustaceans</button>
						<button mat-menu-item>Corals</button>
						<button mat-menu-item>Arachnids</button>
						<button mat-menu-item>Velvet worms</button>
						<button mat-menu-item>Horseshoe crabs</button>
					</mat-menu>

					<mat-menu #fish="matMenu">
						<button mat-menu-item>Baikal oilfish</button>
						<button mat-menu-item>Bala shark</button>
						<button mat-menu-item>Ballan wrasse</button>
						<button mat-menu-item>Bamboo shark</button>
						<button mat-menu-item>Banded killifish</button>
					</mat-menu>

					<mat-menu #amphibians="matMenu">
						<button mat-menu-item>Sonoran desert toad</button>
						<button mat-menu-item>Western toad</button>
						<button mat-menu-item>Arroyo toad</button>
						<button mat-menu-item>Yosemite toad</button>
					</mat-menu>

					<mat-menu #reptiles="matMenu">
						<button mat-menu-item>Banded Day Gecko</button>
						<button mat-menu-item>Banded Gila Monster</button>
						<button mat-menu-item>Black Tree Monitor</button>
						<button mat-menu-item>Blue Spiny Lizard</button>
						<button mat-menu-item disabled>Velociraptor</button>
					</mat-menu>

				</div>
			</div>
		</m-material-preview>
		<m-material-preview [viewItem]="exampleToggling">
			<div class="m-section">
				<span class="m-section__sub">
					By default, the menu will display below (y-axis), after (x-axis), and overlapping its trigger. The position can be changed using the
					<mark>xPosition</mark> (
					<mark>before | after</mark>) and
					<mark>yPosition</mark> (
					<mark>above | below</mark>) attributes. The menu can be be forced to not overlap the trigger using
					<code>[overlapTrigger]="false"</code> attribute.
				</span>
				<div class="m-separator m-separator--dashed"></div>
				<div class="m-section__content">
					<mat-menu #appMenu="matMenu" yPosition="above">
						<button mat-menu-item>Settings</button>
						<button mat-menu-item>Help</button>
					</mat-menu>

					<button mat-icon-button [matMenuTriggerFor]="appMenu">
						<mat-icon>more_vert</mat-icon>
					</button>
				</div>
			</div>
		</m-material-preview>
	</div>
</div>